<template>
  <el-card style="margin-top: 10px">
    <div v-if="headShow">
      <!-- search组件 -->
      <header-search @search="initData" @reset="handlerReset">
        <template #search>
          <el-form-item label="角色名">
            <el-input
              v-model.trim="queryData.name"
              clearable
              style="width: 240px"
              placeholder="请输入"
            />
          </el-form-item>
        </template>
      </header-search>
    </div>
    <!-- 工具栏button组件 -->
    <header-button
      :head-show.sync="headShow"
      :check-data="tableEle"
      @loading="handlerLoading"
      @open="$refs.formPage.isShow=true"
    />
    <!-- 表格table组件 -->
    <my-table
      :table-data="tableData"
      :table-ele="tableEle"
      :table-index="tabindex"
      :loading="loading"
      @del="handlerDel"
      @edit="handlerEdit"
    />
    <!-- 分页组件 -->
    <lay-page
      :limit.sync="queryData.limit"
      :page.sync="queryData.page"
      :count="count"
    />
    <FormPage ref="formPage" @updateList="initData" />
  </el-card>

</template>

<script>
import { delRoleInfoApi, getRoleListApi } from '@/api/role'
import FormPage from './components/FormPage.vue'

export default {
  name: 'RolePage',
  components: {
    FormPage
  },
  data() {
    return {
      tabindex: 0, // 0有索引 1没有
      queryData: {
        name: '',
        limit: 10,
        page: 1
      },
      tableData: [],
      tableEle: [
        { name: '角色ID', prop: 'role_id', template: false, isckecked: true },
        { name: '角色名称', prop: 'name', template: false, isckecked: true },
        {
          name: '角色描述',
          prop: 'description',
          template: false,
          isckecked: true
        },
        {
          name: '创建时间',
          prop: 'create_date',
          template: false,
          isckecked: true
        }
      ],
      count: 0,
      headShow: true,
      loading: false
    }
  },
  watch: {
    'queryData.limit'(val) {
      this.initData()
    },
    'queryData.page'(val) {
      this.initData()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getRoleListApi(this.queryData)
      this.tableData = res.data
      this.count = res.count
    },

    // 重置
    handlerReset() {
      this.queryData = {
        name: '',
        limit: 10,
        page: 1
      }
      this.initData()
    },
    // 设置刷新loading
    async handlerLoading() {
      this.tableData = []
      this.loading = true
      await this.initData()
      this.loading = false
    },

    // 编辑
    handlerEdit(id) {
      this.$refs.formPage.redrawView(id)
    },
    // 删除
    async  handlerDel(id) {
      try {
        await this.$confirm('确定删除嘛')
        await delRoleInfoApi(id)
        this.$message.success('删除成功')
        if (this.tableData.length === 1 && this.page > 1) this.queryData.page--
        this.initData()
      } catch (err) {
        console.log(err)
      }
    }
  }

}
</script>

<style scoped></style>
